<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #eee;
            font-family: Arial, Helvetica, sans-serif;
        }
        header {
            color: #fff;
            background-color: #0072b0;
            border-radius: .5em;
        }
        .container {
            display: flex;
        }
        .main {
            /* float: left; */
            background-color: pink;
            border-radius: .5em;
            width: 70%;
        }
        .sidebar {
            /* float: left; */
            width: 30%;
            padding: 1.5em;
            background-color: #fff;
            border-radius: .5em;
            box-sizing: border-box;
            /* 外边距不再生效 */
            margin-left: 1em;
        }
    </style>
</head>
<body>
    <header>
        <h1>Franklin Running Club</h1>
    </header>
    <div class="container">
        <main class="main">
            <h2>Come join us!</h2>
            <p>
                The Franklin Running club meets at 6:00pm every Thursday
                at the town square. Runs are three to five miles, at your
                own pace.
            </p>
        </main>
        <aside class="sidebar">
            <div class="widget"></div>
            <div class="widget"></div>
        </aside>
    </div>
</body>
</html>